<!DOCTYPE html>
<!--
 PopCulture - A package to compute metrics on Wikipedia articles.
 Copyright (C) 2012  Nuno J. Silva

 This file is part of PopCulture

 PopCulture is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, version 3 of the License.

 PopCulture is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with PopCulture.  If not, see <http://www.gnu.org/licenses/>.

-->
<html>
  <head>
    <title>PopCulture</title>
    <link type="text/css" rel="stylesheet" href="popculture.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="d3.v2.js"></script>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <!-- http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js -->
    <script type="text/javascript" src="jquery-ui.min.js"></script>

    <!-- http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css -->
    <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
  </head>
  <body oncontextmenu="javascript:return false;" >
    <div id="plots">
      <svg style="width: 100%; height: 100%;" id="plots_svg_container">
	<g id="container_minor">
	  <rect id="container_minor_rect" />
	  <g transform="translate(0,0)" id="upper" class="plotarea">
	  </g>
	  <g transform="translate(0,325)" id="lower"  class="plotarea">
	  </g>
	</g>
      </svg>
      <div id="dwaitplot1" class="info plot1msg">
	<span style="font-size: 12pt;"><b>Processing request...</b></span>
	<br/>
	<span id="dwaitplot1_progress"></span>
      </div>
      <div id="dwaitplot2" class="info plot2msg">
	<span style="font-size: 12pt;"><b>Processing request...</b></span>
	<br/>
	<span id="dwaitplot2_progress"></span>
      </div>

      <div id="derrorplot1" class="error plot1msg">
	<span style="font-size: 12pt;"><b>Unknown Error</b></span>
	<br/>
	The server was unable to fulfill your request.
      </div>
      <div id="derrorplot2" class="error plot2msg">
	<span style="font-size: 12pt;"><b>Unknown Error</b></span>
	<br/>
	The server was unable to fulfill your request.
      </div>
      <div id="d404plot1" class="error plot1msg">
	<span style="font-size: 12pt;"><b>Error:</b> No such article.</span>
	<br/>
	The article you requested does not exist in the wiki you selected.
      </div>
      <div id="d404plot2" class="error plot2msg">
	<span style="font-size: 12pt;"><b>Error:</b> No such article.</span>
	<br/>
	The article you requested does not exist in the wiki you selected.
      </div>

      <div id="demptyplot1" class="info plot1msg">
	<span style="font-size: 12pt;"><b>No data in this plot</b></span>
	<br/>
	The article you requested was not changed during the selected time range. 
      </div>
      <div id="demptyplot2" class="info plot2msg">
	<span style="font-size: 12pt;"><b>No data in this plot</b></span>
	<br/>
	The article you requested was not changed during the selected time range. 
      </div>
    </div>
    <div id="rightpane">
      <div id="sidebartogglebar">
	<div id="sidebartoggle" onclick="javascript:toggle_content()">
	  «
	</div>
      </div> <div id="content">
      </div>
      <br/>
      <div id="contentoptions">
	<strong>Mode:</strong> <form action="" id="contentoptionsform">
	  <input type="radio" onchange="javascript:change_content_mode()" name="contentmode" value="single" id="single" checked> <label for="single">single revision</label> 
	  <input type="radio" onchange="javascript:change_content_mode()" name="contentmode" value="diff" id="diff"> <label for="diff">show changes</label>
	</form>
      </div>
    </div>
    <div id="leftmenu">
      <div id="datepicker">
      <strong>Date range</strong>
      <form id="date_form" action="javascript:update_plots();">
	From: <input type="text" class="date_input" name="from_date" value="2011/10/01 00:01:01" onchange="update_dates(); update_plots();"><br/>
	To: <input type="text" class="date_input" name="to_date" value="2013/01/19 00:01:01" onchange="update_dates(); update_plots();">
      </form>
      </div>
      <div id="plot1div">
	<strong>Plot 1</strong>
      <form id="plot1" action="javascript:update_plots();">
	<input type="hidden" name="plotid" value="#upper">
	Article: <input type="text" size="10" name="article" id="plot1article" value="Lisbon Metro" onkeyup="javascript:ajax_autocomplete('plot1');" onchange="javascript:update_plots();" autocomplete="off"><br/>

	Plot: <select name="plot" onchange="javascript:update_plots();">
	  <option selected>Quality</option>
	  <option>Vandalism</option>
	  <option>Controversy</option>
	  <option>Length</option>
	</select><br/>
	Color: <select name="gradient" onchange="javascript:update_plots();">
	  <option>Quality</option>
	  <option selected>Vandalism</option>
	  <option>Controversy</option>
	  <option>Length</option>
	  <option>by author</option>
	</select><br/>
	Granularity: <select name="granularity" onchange="javascript:update_plots();">
	  <option value="article" selected>Article</option>
	  <option value="section">Section</option>
	</select><br/>
	Site: <select name="site" class="siteselect" onchange="javascript:update_plots();">
	</select><br/>
      </form></div>

      <div id="plot2div"><strong>Plot 2</strong>
      <form id="plot2"  action="javascript:update_plots();">
	<input type="hidden" name="plotid" value="#lower">
	Article: <input type="text" size="10" name="article" id="plot2article" value="Lisbon Metro" onkeyup="javascript:ajax_autocomplete('plot2');"  onchange="javascript:update_plots();" autocomplete="off"><br/>

	Plot: <select name="plot" onchange="javascript:update_plots();">
	  <option>Quality</option>
	  <option>Vandalism</option>
	  <option>Controversy</option>
	  <option selected>Length</option>
	</select><br/>
	Color: <select name="gradient" onchange="javascript:update_plots();">
	  <option>Quality</option>
	  <option>Vandalism</option>
	  <option selected>Controversy</option>
	  <option>Length</option>
	  <option>by author</option>
	</select><br/>
	Granularity: <select name="granularity" onchange="javascript:update_plots();">
	  <option value="article" selected>Article</option>
	  <option value="section">Section</option>
	</select><br/>
	Site: <select name="site" class="siteselect" onchange="javascript:update_plots();">
	</select><br/>
      </form></div>
      <br/>
      <div id="general">

	<input type="checkbox" name="duonorm" id="duonorm" onchange="javascript:toggle_duo_norm();update_plots();"> <label for="duonorm">Normalize both plots together</label><br/>

      <form id="general_options"  action="javascript:update_plots();">
	<strong>Log scale:</strong>
	<input type="checkbox" name="log" id="log" onchange="javascript:update_plots();"> <label for="log">plot</label>
	<input type="checkbox" name="gradient_log" id="gradient_log" onchange="javascript:update_plots();"> <label for="gradient_log">color fill</label>
      </form>
      <br/>
      Timeline key: 	  <span id="talk_rev_key"></span> talk page<br/>
      Impact: <span id="timeline_impact_key"></span><br/>
      <div id="timeline_type_key">
	<div id="timeline_type_key_intro">Type: </div>
	<div id="timeline_type_key_key">
	  <span id="revert_rev_key"></span> revert
	  <span id="del_rev_key"></span> deletion
	  <span id="regular_rev_key"></span> regular
	</div>
      </div>

      Gradient key:<br/>
      <div>
	<div id="key" class="gradient_key"></div>&nbsp;&nbsp;<div id="keyb" class="gradient_key"></div>
      </div>

    </div>
    <script type="text/javascript" src="popculture.js"></script>
  </body>
</html>
